---
title: Modal
description: Floating button that opens an AI assistant chat box
---

import { ModalChat } from "@/components/example/modal/ModalChat";
import { DocsRuntimeProvider } from "@/app/(home)/DocsRuntimeProvider";

## Live Demo

<div className="h-[400px]">
  <DocsRuntimeProvider>
    <ModalChat />
  </DocsRuntimeProvider>
</div>

## Overview

The Modal example demonstrates how to create a floating action button that opens an AI assistant chat interface in a modal dialog. This pattern is perfect for applications where you want to provide AI assistance without disrupting the main user interface.

## Features

- **Floating Action Button**: Clean, accessible floating button that triggers the modal
- **Modal Dialog**: Full-screen modal with proper focus management and keyboard navigation
- **Responsive Design**: Works seamlessly across desktop and mobile devices
- **Customizable Styling**: Easy to customize colors, positioning, and animations
- **Accessibility**: Proper ARIA labels and keyboard navigation support

## Usage

To implement a modal chat interface in your application:

1. **Install Required Components**: Use the assistant-ui CLI to add the modal component
2. **Wrap with Runtime Provider**: Ensure your modal is wrapped with `AssistantRuntimeProvider`
3. **Configure API Endpoint**: Set up your chat API endpoint
4. **Customize Styling**: Modify the button and modal appearance to match your design

## Code

The modal implementation uses the `AssistantModal` component from assistant-ui, which provides:

- Automatic focus management
- Escape key handling
- Backdrop click to close
- Responsive positioning
- Customizable trigger button
